<div class="Singleform">
<script>
var current_module = '{{$current_model}}';
var current_id = '{{$id}}';
var current_data = null;
{{if $current_data}}
current_data = {{$current_data}};
{{/if}}
</script>
{{if $copy}}
<div class="ui-state-highlight">
复制数据，保存时，创建一条新的数据记录。修改不影响原记录内容。
</div>
{{/if}}
<div class="row">
	<div class="col-md-8">
	{{if $current_action=='admin_add'}}
	<?php
echo $this->MForm->form(array(    
	'model'=> $current_model,
	'auto_form' => 1,
	'class'=>'form-horizontal form',
	'form_type' => 'add',
	'url' => array('action' => 'add'),
));
	?>
	{{elseif $current_action=='admin_edit'}}
	<?php 
echo $this->MForm->form(array(
     'model'=> $current_model,  
	'class'=>'form-horizontal form',  
    'auto_form' => 1,
    'form_type' => 'edit',
    'url' => array('action' => 'edit',$id,$copy),
));
	?>
	
	{{/if}}
	<!-- https://github.com/lokesh/color-thief -->
	{{$this->Html->script(array('color-thief.min.js',)) }}
	</div>
	<div class="col-md-4">
		<p><strong>提示：</strong></p>
		<p>输入一个图片地址后，tab切换到另外的输入框，当预览图片显示后，会自动计算生成图片的颜色数据</p>
		<hr/>
		<p><strong>图片预览：</strong></p>
		<img id="img-preview">
		<div id="colors">
			<?php 
			$colors = explode("\r\n",$this->data['Color']['colors']);
			foreach($colors as $c){
				list($color,$desc) = explode(';',$c);
				echo '<div title="'.$color.'" data-desc="'.$desc.'" class="color-item" style="display:inline-block;width:30px;height:30px;margin:5px;background-color:'.$color.'"></div>';
			}
			?>
			
		</div>
		<p style="color:red;font-size:16px;">
			点击颜色块，会将改颜色删除。<br/>
			请删除相近的、不准确的颜色，<br/>
			输入框中的颜色会自动更新，<br/>
			操作完成后，提交保存。
		</p>
		<!-- <button id="btn-input-color" class="btn btn-primary">重新填入颜色</button> -->
	</div>
</div>
</div>
<script>

$(function(){
	$('#ColorCoverimg').blur(function(){
		$('#img-preview').attr('src','/downloads/fetch_url?fu='+encodeURIComponent( this.value ) );
		
		/*ajaxAction('/colors/getImageColors',{uri:this.value},null,function(request){
			//alert(request.colors);
			
			$('#colors').append('<hr>');
			var txt = '',color='';			
			for(var i in request.colors) {
				//color = 'rgb('+result[i]+')';
				color = request.colors[i];
				alert(color);
				txt += color+"\r\n";
				$('#colors').append('<div title="'+color+'" class="color-item" style="display:inline-block;width:30px;height:30px;margin:5px;background-color:'+color+'"></div>');
			}
			
		});*/
		//setTimeout(getImageColor,5000);		
	});
	
	$('#img-preview').on('load',function(){
		getImageColor();
	});
	$(document).on('click','#colors .color-item',function(){
		$(this).tooltip('destroy');
		$(this).remove();
		updateColorTxt();
	});
	
	
	function getImageColor(){
		var img = $('#img-preview');
		var colorThief = new ColorThief();
		var result = colorThief.getPalette(img[0], 15);
		var txt = '';
		$('#colors').html('');
		for(var i in result) {
			color = 'rgb('+result[i]+')';
			txt += color+"\r\n";
			$('#colors').append('<div title="'+color+'" class="color-item" style="display:inline-block;width:30px;height:30px;margin:5px;background-color:'+color+'"></div>');
		}
		$('#ColorColors').val(txt);
		$('#colors .color-item').tooltip();
	}
	function updateColorTxt(){
		var txt = '';
		$('#colors .color-item').each(function(){
			if($(this).data('desc')  && $(this).data('desc') != "") {
				txt += $(this).css('background-color')+';'+$(this).data('desc')+"\r\n";
			}
			else{
				txt += $(this).css('background-color')+"\r\n";
			}			
		});
		$('#ColorColors').val(txt);
	};
	
})

</script>
